<template>
  <div class="rule-config-page" v-loading="pageLoading">
    <a-row>
      <a-form-model ref="ruleForm" :model="ruleForm">
        <span v-for="item in fieldSource" :key="item.id">
          <!-- input -->
          <a-col
            :xs="24"
            :sm="24"
            :md="24"
            :lg="12"
            :xl="12"
            :xxl="8"
            v-if="item.fieldType == 'input'"
          >
            <a-form-model-item
              :label="
                item.fieldName +
                `${item.fieldUnit ? '(' + item.fieldUnit + ')' : ''}`
              "
              :prop="item.equFieldCode"
              :rules="[
                {
                  required: item.fieldRequired == 1,
                  message: '请输入设备名称',
                  trigger: ['blur', 'change'],
                },
              ]"
            >
              <a-input
                :placeholder="item.placeHolder || '请输入' + item.fieldName"
                :disabled="item.isEditable == 1"
                allowClear
                v-model="ruleForm[item.equFieldCode]"
                :type="item.fieldContentType"
                :maxLength="Number(item.maxLength)"
              />
            </a-form-model-item>
          </a-col>
          <!-- select -->
          <a-col
            :xs="24"
            :sm="24"
            :md="24"
            :lg="12"
            :xl="12"
            :xxl="8"
            v-if="item.fieldType == 'select'"
          >
            <a-form-model-item
              :label="item.fieldName"
              :prop="item.equFieldCode"
              :rules="[
                {
                  required: item.fieldRequired == 1,
                  message: item.placeHolder || '请选择' + item.fieldName,
                  trigger: ['change'],
                },
              ]"
            >
              <a-select
                allowClear
                :disabled="item.isEditable == 1"
                v-model="ruleForm[item.equFieldCode]"
                :placeholder="item.placeHolder || '请选择' + item.fieldName"
              >
                <a-select-option
                  :value="select.value"
                  v-for="(select, index) in item.selectDataList"
                  :key="index"
                >
                  {{ select.text }}
                </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
        </span>
      </a-form-model>
    </a-row>
    <!-- 提交按钮 -->
    <div class="footer">
      <a-button
        type="primary"
        style="margin-left: 10px"
        v-loading="submitLoading"
        @click="onSubmit()"
      >
        确定
      </a-button>
    </div>
  </div>
</template>

<script>
import {
  specialRuleConfig,
  saveSpecialRule,
} from "@/api/user-center/equipmentManage.js";
export default {
  data() {
    return {
      ruleForm: {},
      submitLoading: false,
      fieldSource: [],
      pageLoading: false,
    };
  },
  mounted() {
    this.getByCondition();
  },
  methods: {
    //提交
    onSubmit() {
      this.submitLoading = true;
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          let { id } = this.$route?.query || {};
          saveSpecialRule({ ...this.ruleForm, id })
            .then((res) => {
              this.$message.success("操作成功");
            })
            .catch((_) => {
              this.$message.error("操作失败，请稍后重试！");
            })
            .finally((_) => {
              this.submitLoading = false;
            });
        } else {
          return false;
        }
      });
    },

    //查询字段列表
    getByCondition() {
      let { id } = this.$route?.query || {};
      this.pageLoading = true;
      return new Promise((resolve, reject) => {
        specialRuleConfig({ id })
          .then((res) => {
            let { data } = res;
            this.fieldSource = data?.result || [];
            this.fieldSource.forEach((v) => {
              this.$set(this.ruleForm, v.equFieldCode, v.defalutValue);
            });
          })
          .catch((_) => {
            this.fieldSource = [];
          })
          .finally((_) => {
            this.pageLoading = false;
          });
      });
    },
  },
};
</script>

<style lang="less" scoped>
.rule-config-page {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 20px 20px 20px 0;
  /deep/.ant-form {
    .ant-form-item {
      .flex();
      .ant-form-item-label {
        width: 180px;
        flex-shrink: 0;
      }
      .ant-form-item-control-wrapper {
        flex: 1;
        .ant-form-item-children {
          display: flex;
          width: 100%;
          .ant-input-affix-wrapper {
            display: flex;
            width: 100%;
          }
        }
        textarea {
          height: 80px;
        }
        .ant-calendar-picker {
          width: 100%;
        }
      }
    }
    /deep/.ant-select {
      width: 100%;
    }
  }
  .footer {
    height: 72px;
    border-top: 1px solid #f3f4f6;
    margin-top: 34px;
    .flex();
    justify-content: center;
    align-items: center;
  }
}
</style>
